<template>
  <div class="msg-box" :class="{'info': type == 'info', 'warn': type == 'warn', 'succ': type == 'succ', 'error': type == 'error'}">
    <ul>
      <li v-for="(n, i) in msgs" :key="i">* {{n}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    msg: [Array, String],
    type: {
      type: String,
      default: 'info'
    }
  },
  components: {
  },
  data () {
    return {
    }
  },
  computed: {
    msgs () {
      let t = []
      if (typeof this.msg === 'string') {
        t.push(this.msg)
      } else {
        t = this.msg
      }
      return t
    }
  },
  watch: {
  },
  methods: {
  }
}
</script>

<style scoped lang="less">
@import '../assets/less/var.less';

.msg-box {
  color: @colorWhite;
  padding: 5px 20px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  opacity: .6;
  &.info {
    background-color: @colorTeal;
  }
  &.warn {
    background-color: #ff6600;
  }
  &.error {
    background-color: @colorRed;
  }
  &.succ {
    background-color: @colorGreen;
  }
}
</style>
